// 初始化样式
* {
    margin: 0;
    padding: 0;
}

li,
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    width: 100vw;
    margin: 0 auto;
    background-color: #f6f7f8;
}

// 第一部分：nav导航栏
.nav {
    position: fixed;
    top: 0;
    left: 0px;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 12vw;
    background-color: #019fe6;
    z-index: 999;

    .left {
        position: relative;
        width: 40vw;
        height: 12vw;
        font: normal normal 4.8vw/13.5vw "Microsoft YaHei";
        text-indent: 10vw;
        color: #fff;

        &::before {
            content: "";
            position: absolute;
            top: 4vw;
            left: 2vw;
            width: 6vw;
            height: 6vw;
            background: url(../images/首页icon.png) no-repeat center;
            background-size: contain;
        }
    }

    .right {
        position: absolute;
        top: 2vw;
        right: 5vw;
        width: 24vw;
        height: 8vw;
        border-radius: 4vw;
        background-color: rgba(0, 0, 0, .15);
        font: normal normal 3vw/8vw "Microsoft YaHei";
        text-align: center;
        color: #ddd;

        &::before {
            content: "";
            position: absolute;
            top: 1.5vw;
            left: 3vw;
            width: 5vw;
            height: 5vw;
            background: url(../images/更多icon.png) no-repeat center;
            background-size: contain;
        }

        &::after {
            content: "";
            position: absolute;
            top: 2vw;
            right: 4vw;
            width: 4vw;
            height: 4vw;
            background: url(../images/关闭icon.png) no-repeat center;
            background-size: contain;
        }
    }
}

// 第二部分：header 
.header {
    width: 100vw;
    height: 50vw;
    background-color: #019fe6;
    margin: 12vw auto 0;

    .header_hd {
        position: relative;
        width: 100vw;
        height: 30vw;
        font: normal normal 12vw/40vw "Microsoft YaHei";
        text-align: center;
        color: #fff;

        &::before {
            content: "今日收益(元)";
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 15vw;
            font: normal normal 5vw/15vw "Microsoft YaHei";
            letter-spacing: .6vw;
        }
    }

    .header_bd {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 20vw;

        &::after {
            content: "";
            position: absolute;
            top: 2vw;
            left: 49.4vw;
            width: .6vw;
            height: 16vw;
            background: #fff;
        }

        .balance {
            position: relative;
            width: 50vw;
            height: 20vw;
            font: normal normal 4.5vw/10vw "Microsoft YaHei";
            letter-spacing: .6vw;
            text-align: center;
            color: #fff;

            &::before {
                content: "";
                position: absolute;
                top: 2.5vw;
                left: 9vw;
                width: 5vw;
                height: 5vw;
                background: url(../images/收益左.png) no-repeat center;
                background-size: contain;
            }

            &::after {
                content: "21.00";
                position: absolute;
                top: 8vw;
                left: 0;
                width: 50vw;
                height: 10vw;
                font: normal normal 5vw/10vw "Microsoft YaHei";
            }
        }

        .profit {
            position: relative;
            width: 50vw;
            height: 20vw;
            font: normal normal 4.5vw/10vw "Microsoft YaHei";
            letter-spacing: .6vw;
            text-align: center;
            color: #fff;

            &::before {
                content: "";
                position: absolute;
                top: 2.5vw;
                left: 9vw;
                width: 5vw;
                height: 5vw;
                background: url(../images/收益右.png) no-repeat center;
                background-size: contain;
            }

            &::after {
                content: "57.00";
                position: absolute;
                top: 8vw;
                left: 0;
                width: 50vw;
                height: 10vw;
                font: normal normal 5vw/10vw "Microsoft YaHei";
            }
        }
    }
}

// 第三部分 预警与订单
.main {
    display: flex;
    width: 96vw;
    height: 28vw;
    border-radius: 2vw;
    margin: 3vw auto;
    background-color: #fff;

    a {
        width: 25%;
        height: 28vw;
        font: normal bold 3.6vw/36vw "Microsoft YaHei";
        text-align: center;
        color: #333;
    }

    .warn1 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 3vw;
            left: 6vw;
            width: 12vw;
            height: 12vw;
            background: url(../images/缺电预警.png)no-repeat center;
            background-size: contain;
        }

        &::after {
            content: "21";
            position: absolute;
            top: 21vw;
            left: 9vw;
            font-weight: bold;
            line-height: normal;
            color: #fcb118;
        }
    }

    .order1 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 3vw;
            left: 6vw;
            width: 12vw;
            height: 12vw;
            background: url(../images/今日订单.png)no-repeat center;
            background-size: contain;
        }

        &::after {
            content: "21";
            position: absolute;
            top: 21vw;
            left: 10vw;
            font-weight: bold;
            line-height: normal;
            color: #20b8fd;
        }
    }

    .order2 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 3vw;
            left: 6vw;
            width: 12vw;
            height: 12vw;
            background: url(../images/全部订单.png)no-repeat center;
            background-size: contain;
        }

        &::after {
            content: "218";
            position: absolute;
            top: 21vw;
            left: 9vw;
            font-weight: bold;
            line-height: normal;
            color: #03b5a5;
        }
    }

    .warn2 {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 3vw;
            left: 6vw;
            width: 12vw;
            height: 12vw;
            background: url(../images/缺货预警.png)no-repeat center;
            background-size: contain;
        }

        &::after {
            content: "21";
            position: absolute;
            top: 21vw;
            left: 9vw;
            font-weight: bold;
            line-height: normal;
            color: #ed4014;
        }
    }
}

//  第四部分：设备管理
.device {
    width: 100vw;
    margin: 0vw auto;

    .my_device {
        width: 96vw;
        height: 22vw;
        margin: 0 auto 3vw;
        border-radius: 2vw;
        overflow: hidden;
        background-color: #fff;

        // 第一层：标题模块
        .title {
            width: 96vw;
            height: 6vw;
            font: normal normal 4vw/8vw "Microsoft YaHei";
            text-indent: 5vw;
        }

        // 第二层：我的设备
        .my_dev {
            display: flex;
            justify-content: space-between;
            width: 96vw;
            height: 16vw;
            background: #fff;

            // 未铺货设备
            .my_off {
                width: 48vw;
                height: 16vw;
                overflow: hidden;

                .off_dev {
                    position: relative;
                    width: 42vw;
                    height: 12vw;
                    box-sizing: border-box;
                    border: .5vw solid #eee;
                    margin: 2vw auto;
                    border-left: 1.5vw solid #ed7185;
                    border-radius: 2vw;
                    font: normal normal 4vw/12vw "Microsoft YaHei";
                    text-indent: 2vw;
                    color: #333;

                    &::after {
                        position: absolute;
                        content: "10";
                        top: 0;
                        right: 5vw;
                        color: #019fe6;
                        font-size: 4.5vw;
                    }
                }
            }

            // 已铺货设备
            .my_on {
                width: 48vw;
                height: 18vw;
                overflow: hidden;

                .on_dev {
                    position: relative;
                    width: 42vw;
                    height: 12vw;
                    box-sizing: border-box;
                    border: .5vw solid #eee;
                    border-left: 1.5vw solid #0188c2;
                    border-radius: 2vw;
                    margin: 2vw auto;
                    font: normal normal 4vw/12vw "Microsoft YaHei";
                    text-indent: 2vw;
                    color: #333;

                    &::after {
                        position: absolute;
                        content: "10";
                        top: 0;
                        right: 5vw;
                        color: #019fe6;
                        font-size: 4.5vw;
                    }
                }

            }
        }
    }

    .lower_device {
        width: 96vw;
        height: 22vw;
        margin: 0 auto;
        border-radius: 2vw;
        overflow: hidden;
        background-color: #fff;

        // 第一层：标题模块
        .title {
            width: 96vw;
            height: 6vw;
            font: normal normal 4vw/8vw "Microsoft YaHei";
            text-indent: 5vw;
        }

        // 第二层：我的设备
        .lower_dev {
            display: flex;
            justify-content: space-between;
            width: 96vw;
            height: 16vw;
            background: #fff;

            // 未铺货设备
            .lower_off {
                width: 48vw;
                height: 16vw;
                overflow: hidden;

                .off_dev {
                    position: relative;
                    width: 42vw;
                    height: 12vw;
                    box-sizing: border-box;
                    border: .5vw solid #eee;
                    margin: 2vw auto;
                    border-left: 1.5vw solid #bd1adb;
                    border-radius: 2vw;
                    font: normal normal 4vw/12vw "Microsoft YaHei";
                    text-indent: 2vw;
                    color: #333;

                    &::after {
                        position: absolute;
                        content: "10";
                        top: 0;
                        right: 5vw;
                        color: #019fe6;
                        font-size: 4.5vw;
                    }
                }
            }

            // 已铺货设备
            .lower_on {
                width: 48vw;
                height: 18vw;
                overflow: hidden;

                .on_dev {
                    position: relative;
                    width: 42vw;
                    height: 12vw;
                    box-sizing: border-box;
                    border: .5vw solid #eee;
                    border-left: 1.5vw solid #019191;
                    border-radius: 2vw;
                    margin: 2vw auto;
                    font: normal normal 4vw/12vw "Microsoft YaHei";
                    text-indent: 2vw;
                    color: #333;

                    &::after {
                        position: absolute;
                        content: "10";
                        top: 0;
                        right: 5vw;
                        color: #019fe6;
                        font-size: 4.5vw;
                    }
                }

            }
        }
    }
}

// 第五部分：主体部分 
.other {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 96vw;
    margin: 3vw auto 18vw;

    a {
        display: flex;
        width: 46vw;
        height: 16vw;
        margin-bottom: 3vw;
        border-radius: 2vw;
        background-color: #fff;
        color: #333;
    }

    .li_1 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/代理管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_2 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/商家管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_3 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/员工管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_4 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/铺货管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_5 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/商品管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_6 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/广告管理.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_7 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/提现审核.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }

    .li_8 {
        position: relative;

        .left {
            position: absolute;
            top: 3vw;
            left: 4vw;
            width: 10vw;
            height: 10vw;
            background: url(../images/系统配置.png) no-repeat center;
            background-size: contain;
        }

        .right {
            width: 46vw;
            height: 16vw;
            font: normal bold 5vw/16vw "Microsoft YaHei";
            text-indent: 18vw;
        }
    }
}

// 底部菜单--模块
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 16vw;
    box-shadow: 0.2vw 0 0.2vw 0.2vw #ddd;
    background: #fff;

    a {
        width: 16vw;
        height: 16vw;

        img {
            width: 16vw;
            height: 16vw;
        }
    }
}